<template>
	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" :style="{ backgroundColor: backgroundColor }">
		<div class="mask-content" @click.stop.prevent="stopPrevent" :style="[
				{
					transform: transform
				}
			]">
			<div class="view-content">
				<div class="share-header">
					<text class="title">安全验证</text>
					<text class="refresh" @tap="coderefresh()">刷新</text>
				</div>
				<div class="share-list">
					<image ref="codeimg" :src="bigimg" mode=""></image>
					<abbr class="vc-img-load" v-show="img_loading">{{img_loading_text}}</abbr>
				</div>
				<div class="vc-bottom">
					<view class="item" v-for="(s,index) in codelist" :key="index" :class="{'act':codestr==s}" @tap="checkvercode(s)">
						<text>{{s}}</text>
					</view>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				config: {},
				img_loading: true,
				img_loading_text: '正在加载...',
				bigimg: "",
				phone: '',
				codelist: [],
				codestr: '',
				cachekey: ''
			};
		},
		props: {
			contentHeight: {
				type: Number,
				default: 0
			},
			//是否是tabbar页面
			hasTabbar: {
				type: Boolean,
				default: false
			}
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)'
			};
			this.transform = this.config.transform;
		},
		methods: {
			toggleMask(phone) {
				//防止高频点击
				if (this.timer == 1) {
					return;
				}
				this.timer = 1;
				setTimeout(() => {
					this.timer = 0;
				}, 500);

				if (this.show) {
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(() => {
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200);
					return;
				}

				this.show = true;
				//等待mask重绘完成执行
				if (this.hasTabbar) {
					uni.hideTabBar({
						success: () => {
							setTimeout(() => {
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(-80px)';
							}, 10);
						}
					});
				} else {
					setTimeout(() => {
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(-80px)';
					}, 10);
				}
				
				this.coderefresh(phone)
			},
			coderefresh(phone) {
				this.codestr = ''
				this.codelist = [];
				this.phone = phone
				this.getVercodeimage(this.phone)
			},
			getVercodeimage(phone) {
				let that = this
				that.phone = phone
				that.img_loading_text = "正在加载..."
				this.$request.get({
					data: {
						c: 'LoginController',
						m: 'getVercode',
						phone: phone
					}
				}).then(res => {
					that.img_loading = false
					let result = res;
					if (result.Status == 'ok') {
						that.bigimg = result.Tag.BigImg
						that.codelist = result.Tag.chooseList
						that.cachekey = result.Tag.cachekey
						that.img_loading_text = '';
					} else that.img_loading_text = "请求失败，请刷新"
				}).catch(error => {
					that.img_loading = false
					that.img_loading_text = "请求失败，请刷新"
				})
			},
			checkvercode(s) {
				this.codestr = s
				let that = this
				uni.showLoading({
					title: '请稍等...',
					mask:true
				})
				this.$request.get({
					data: {
						c: 'LoginController',
						m: 'getPhoneCode',
						phone: that.phone,
						codestr: s,
						cachekey: that.cachekey
					}
				}).then(res => {
					let result = res
					if (result.Status == 'ok') {
						let tag = result.Tag
						//验证码检测成功，已经发送验证码，关闭验证码框，倒计时开始
						that.$emit('changeCodetxt',tag);
						that.transform = that.config.transform;
						that.backgroundColor = 'rgba(0,0,0,0)';
						setTimeout(() => {
							that.show = false;
							that.hasTabbar && uni.showTabBar();
						}, 200);
					} else {
						uni.showModal({
							content: result.Msg || '验证码获取失败，请稍候重试',
							showCancel: false,
							success() {
								that.coderefresh()
							}
						});
					}
				}).catch(ex => {
					
				})
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 998;
		transition: 0.3s;

		.bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90upx;
			background: #fff;
			z-index: 9;
			font-size: 2upx;
		}
	}

	.mask-content {
		width: 84%;
		transition: 0.3s;
		background: #fff;
		border-radius: 10upx;
		padding: 0 20upx;

		&.has-bottom {
			padding-bottom: 90upx;
		}

		.view-content {
			height: 100%;
		}
	}

	.share-header {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 90upx;

		.title {
			font-size: 34upx;
		}

		.refresh {
			font-size: 30upx;
			color: #d19933;
			position: absolute;
			right: 20upx;
		}
	}

	.share-list {
		position: relative;
		padding-top: 10%;

		image {
			width: 400upx;
			height: 60upx;
			position: absolute;
			left: 100upx;
			top: 0;
			border-width: 0;
			border: none;
		}

		.vc-img-load {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 50%;
			text-align: center;
			color: #bfbfbf;
		}
	}

	.vc-bottom {
		padding: 80upx 0;
		display: flex;
		align-content: center;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;

		.item {
			width: 10%;
			margin: 10upx 0;
			border: 1px solid #bfbfbf;
		}

		.act {
			background-color: #26cad3;
			color: #fff;
			border: 1px solid #26cad3;
		}

		.vc-small {
			height: 80upx;
			width: 90upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
